<template>
  <div class="shortcut-key-container">
    <div class="container-item">
      <h3>{{ $t('preferences.global') }}</h3>
      <div>
        <div class="toggle-container">
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.shortcuts') }}</span>
            <el-switch v-model="value1" />
          </div>
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.global-search') }}</span>
            <div class="display-flex flex-align">
              <span class="tips">Ctrl K</span>
              <el-switch v-model="value1" />
            </div>
          </div>
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.logout') }}</span>
            <div class="display-flex flex-align">
              <span class="tips">Alt Q</span>
              <el-switch v-model="value1" />
            </div>
          </div>
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.lock-screen') }}</span>
            <div class="display-flex flex-align">
              <span class="tips">Alt L</span>
              <el-switch v-model="value1" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(true)

defineOptions({
  name: 'CorePreferencesShortcutKey'
})
</script>
